<template>
  <div style="background-color: #f6f6f6">
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="form" style="padding-left: 20px;">
          <el-form :inline="true" :model="search" class="dw-form-inline" size="medium">
            <el-form-item label="问卷名">
              <el-input v-model="search.key" placeholder="请输入要查询的问卷名" clearable></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-button type="primary" icon="el-icon-search" @click="queryQuestionnaires()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-title">
            <el-row :span="24" type="flex" justify="space-between" align="middle">
              <el-col :span="4"><h3>问卷管理</h3></el-col>
              <el-col :span="20" style="text-align: right;">
                <el-button type="primary" size="medium" icon="el-icon-plus" plain @click="handleAdd()">新建</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"
                    border :default-sort="{prop: 'username', order: 'ascending'}" @sort-change="handleSortChange">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="id" align="center" v-if="false"></el-table-column>
            <el-table-column label="序号" type="index" width="60" align="center">
              <template v-slot="scope">
                <span>{{(currentPage-1)*pageSize+1+scope.$index}}</span>
              </template>
            </el-table-column>
            <el-table-column label="问卷名称" prop="title" sortable align="center" width="235px"></el-table-column>
            <el-table-column label="开始时间" prop="startTime" sortable align="center" width="180px">
              <template v-slot="scope">
                <i class="el-icon-time"></i>
                {{ formatDate(scope.row.startTime) }}
<!--                {{ scope.row.endTime }}-->
              </template>
            </el-table-column>
            <el-table-column label="结束时间" prop="endTime" sortable align="center" width="180px">
              <template v-slot="scope">
                <i class="el-icon-time"></i>
                {{ formatDate(scope.row.endTime) }}
<!--                {{ scope.row.endTime }}-->
              </template>
            </el-table-column>
            <el-table-column label="状态" prop="status" sortable align="center"
                             :filters="[{text: '未发布', value: 0}, {text: '进行中', value: 1}, {text: '已结束', value: 2}]"
                             :filter-method="filterHandler">
              <template v-slot="scope">
                <el-tag :type="getTagType(scope.row.status)">
                  {{ formatStatus(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300px">
              <template v-slot="scope">
                <el-tooltip content="预览问卷" effect="dark" placement="top">
                  <el-button size="primary" icon="el-icon-view" circle @click="handlePreview(scope.row.id)"></el-button>
                </el-tooltip>
                <el-tooltip content="编辑问卷" effect="dark" placement="top" v-if="scope.row.status==0">
                  <el-button size="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row.id,scope.row.status)"></el-button>
                </el-tooltip>
                <el-tooltip content="删除问卷" effect="dark" placement="top">
                  <el-button size="danger" icon="el-icon-delete" circle @click="handleDelete(scope.row.id)"></el-button>
                </el-tooltip>

                <el-dropdown @command="handleChoose" v-if="scope.row.status==0 || scope.row.status==1" >
                  <el-tooltip content="发送问卷" effect="dark" placement="top">
                    <el-button size="success" icon="el-icon-position" circle ></el-button>
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </el-tooltip>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'0')">选择群组</el-dropdown-item>
                    <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'1')">选择答者</el-dropdown-item>
                    <el-dropdown-item :command="beforeHandleCommand(scope.row.id,'2')">生成链接</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>

                <el-tooltip content="查看答卷结果" effect="dark" placement="top">
                  <el-button size="primary" icon="el-icon-document" circle @click="handleViewResult(scope.row.id)" v-if="scope.row.status==1 || scope.row.status==2"></el-button>
                </el-tooltip>
                <el-tooltip content="数据分析" effect="dark" placement="top">
                  <el-button size="primary" icon="el-icon-data-analysis" circle @click="handleDataAnalysis(scope.row.id)" v-if="scope.row.status==1 || scope.row.status==2"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :page-size="pageSize"

              :current-page="currentPage"
              :total="total"
              :page-sizes="[5,10,20,50]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>

<!--          选择群组抽屉-->
          <div>
            <el-drawer :visible.sync="groupDrawerVisible" append-to-body title="请选择群组并发送" >
              <el-row>
                  <el-input placeholder="请输入想要查询的群组" v-model="searchGroupLine" clearable style="width: 200px"></el-input>
                  <el-button @click="searchGroupInDrawer" type="primary" icon="el-icon-search">查询</el-button>
                  <el-button type="primary" @click="submitSurveyToGroup" icon="el-icon-position">发送</el-button>
              </el-row>
              <template>
                <el-table :data="drawerGroup" border="border" @selection-change="handleGroupsSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="群组名称" prop="groupname"></el-table-column>
                  <el-table-column label="详细说明" prop="introduction"></el-table-column>
                  <el-table-column label="群组人数" prop="numbers" sortable></el-table-column>
                  <el-table-column label="创建时间" prop="createdDate"></el-table-column>
                </el-table>
              </template>
            </el-drawer>
          </div>

<!--          选择答者抽屉-->
          <div>
            <el-drawer :visible.sync="answererDrawerVisible" append-to-body title="选择答者发送">
              <el-row>
                <el-input placeholder="请输入想要查询的答者" v-model="searchAnswererLine" clearable style="width: 200px"></el-input>
                <el-button @click="searchAnswererInDrawer" type="primary" icon="el-icon-search" >查询</el-button>
                <el-button type="primary" @click="submitSurveyToAnswerer" icon="el-icon-position">发送</el-button>
              </el-row>
              <template>
                <el-table :data="drawerAnswerer" border="border" @selection-change="handleAnswerersSelectionChange">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column label="答者姓名" prop="username"></el-table-column>
                  <el-table-column label="答者电话" prop="telnumber"></el-table-column>
                  <el-table-column label="创建时间" prop="createdDate"></el-table-column>
                </el-table>
              </template>
            </el-drawer>
          </div>

<!--          答者链接-->
          <div>
            <el-dialog :visible.sync="QRVisible" append-to-body title="问卷链接">
              <a target="_blank" @click="pushPaperUrl">{{PaperUrl}}</a>
<!--              <a target="_blank" @click="pushPaperUrl">{{PaperUrl}}</a>-->
            </el-dialog>
          </div>

        </div>
      </el-col>
    </el-row>

    <div>
      <el-dialog title="填写问卷基本信息" :visible.sync="createSurveyDialogFormVisible" width="450px"
                 style="padding-left:350px;padding-right:350px;" append-to-body>
        <el-form label-position="top" :model="survey" :rules="surveyInfoRules">
          <el-form-item style="padding-bottom: 20px;" label-width="120px"
            label="问卷标题" prop="title">
            <el-input v-model="survey.title" placeholder="请输入问卷标题" clearable style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="请设置开始时间与结束时间" style="padding-bottom: 30px" prop="startToEnd">
            <el-date-picker
              v-model="survey.startToEnd"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="限制最大答卷数" style="padding-bottom: 20px" prop="maxAnswers">
            <el-switch v-model="isLimit" inactive-text="关" active-text="开" @change="survey.maxAnswers=null"></el-switch>
            <el-input v-if="isLimit===true" v-model="survey.maxAnswers" placeholder="请输入最大答卷数"
                      style="width: 150px;padding-left: 20px" oninput="value=value.replace(/\D/g,'')"></el-input>
          </el-form-item>
          <el-form-item style="padding-bottom: 30px" label="问卷简介">
            <el-input type="textarea" style="width: 400px" v-model="survey.introduction">
            </el-input>
          </el-form-item>
          <el-form-item style="padding-left: 220px">
            <el-button @click="createSurveyDialogFormVisible = false;cleanSurveyBuff">取 消</el-button>
            <el-button v-if="editTag===false" type="primary" @click="goToSurveyEdit()">开始设计</el-button>
            <el-button v-if="editTag===true" type="primary" @click="goToSurveyEdit()">编辑问卷</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

      <!-- 查看答卷结果 -->
      <div>
      <el-dialog title="答卷结果" :visible.sync="surveyResultVisible" width="40%" append-to-body>
        <el-table :data="surveyResultData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe border
          :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
          <!-- <el-table-column label="surveyId" align="center" v-if="false"></el-table-column> -->
          <el-table-column label="id" align="center" v-if="false"></el-table-column>
          <el-table-column property="username" label="答卷人" width="150px"></el-table-column>
          <el-table-column property="answerTime" label="答卷时间" width="200px">
            <template v-slot="scope">
              <i class="el-icon-time"></i>
              <span>{{ formatDate(scope.row.answerTime) }}</span>
              <!--                {{ scope.row.endTime }}-->
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="scope">
              <el-tooltip content="查看结果" effect="dark" placement="top">
                <el-button size="primary" icon="el-icon-view" circle @click="handleResult(surveyId, scope.row.id)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <!-- 特定答卷答者信息分页 -->
        <div class="pagination">
          <el-pagination :page-size="answerPageSize" :current-page="answerCurrentPage" :total="answerTotal"
            :page-sizes="[5, 10, 20, 50]" background layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChange" @size-change="handleSizeChange">
          </el-pagination>
        </div>
      </el-dialog>
    </div>


    <!-- 查看答卷内容 暂时弃用-->
    <div>
      <el-dialog class="surveyContent" title="答卷内容" :visible.sync="surveyContextVisible" append-to-body>
        <div class="survey-content">
          <section class="survey-item" v-for="(item, itemIndex) in questionArray" :key="itemIndex">
            <!-- 显示题干 -->
            <h3>{{ `Q${itemIndex + 1}:${item.content}` }}
              <span v-if="item.must"> *</span>
            </h3>
            <!-- 显示文本题答案 -->
            <span rows="8" cols="80" v-if="item.type === 1">{{ item.textAnswer }}</span>
            <!-- 显示单选和多选答案 -->
            <ol v-else class="options-list">
              <li v-for="(optionItem, optIndex) in item.optionContent" :key="optIndex" style="">
                <label>
                  <template v-if="item.type === 0 || item.type === 2">
                    <!-- 选中的答案显示为红色 -->
                    <span v-if="optionItem.checked" style="color: red;">{{ optionItem.option }}</span>
                    <span v-else>{{ optionItem.option }}</span>
                  </template>
                </label>
              </li>
            </ol>
          </section>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import {compare, exactDateFormat} from "../../utils/common";
import {querySurveyList,deleteSurvey,getSurveyDetail, getAnswerInfo, getSurveyContext } from "../../api/survey";
import {queryGroupsByKeyword} from "../../api/user/user-group";
import {searchAnswerer} from "../../api/user";
import {DateFormat} from "../../utils/common";
import {deliverToGroups,deliverToAnswerers} from "../../api/survey";

//生成访问链接
import QRCode from "qrcodejs2";

export default {
  name: "UserSurvey",

  data(){
    return{
      userInfo:{},
      //限制答卷次数
      isLimit: false,
      survey: {
        //问卷标题
        title: '' ,
        //问卷开始时间与结束时间
        startToEnd: [],
        //问卷简介
        introduction: '',
        //答卷次数
        maxAnswers: null,
      },

      searchGroupLine: '',
      searchAnswererLine: '',

      selectedGroups: [],
      selectedAnswerers: [],

      paperIdForGroup: '',
      paperIdForAnswerer: '',
      paperIdForQR:'',
      PaperUrl: '',

      groupDrawerVisible: false,
      answererDrawerVisible: false,
      QRVisible:false,

      drawerGroup: [],
      drawerAnswerer: [],

      surveyInfo: {},
      questionArray: [],
      surveyId: {},
      surveyResultData: [],

      editTag: false,
      createSurveyDialogFormVisible: false,
      surveyResultVisible: false,
      surveyContextVisible: false,
      dataAnalysisVisible: false,
      surveyInfoRules: {
        title: [{required: true, message: '请输入问卷标题', trigger: 'blur'}],
        startToEnd: [{required: true, message: '请填写问卷起止时间', trigger: 'blur'}],
      },

      search: {
        key: '',
        userId: ''
      },
      tableData: [],

      // 问卷分页
      pageSize: 5,
      currentPage: 1,
      total: 0,

       //特定问卷答者信息分页
       answerPageSize: 5,
      answerCurrentPage: 1,
      answerTotal: 0
    }
  },

  methods: {

    pushPaperUrl(){
      this.$router.push({
        path:'/answerlogin' ,
        query:{
          surveyId:this.paperIdForQR,
        }
      })
    },

    searchGroupInDrawer(){
      queryGroupsByKeyword(this.searchGroupLine).then((res) =>{
        // console.log(res.data.data)
        this.drawerGroup = res.data.data
        for (let i = 0;i < this.drawerGroup.length;i++){
          this.drawerGroup[i].createdDate = DateFormat(this.drawerGroup[i].createdDate)
        }
      })
    },
    searchAnswererInDrawer(){
      searchAnswerer(this.userInfo.id,this.searchAnswererLine).then((res) =>{
        console.error(res.data.data)
        this.drawerAnswerer = res.data.data
        for (let i = 0;i < this.drawerAnswerer.length;i++){
          this.drawerAnswerer[i].createdDate = DateFormat(this.drawerAnswerer[i].createdDate)
        }
      })
    },

    submitSurveyToGroup(){
      if (this.selectedGroups.length === 0){
        this.$message.warning("未选中群组，无法发送到该群组")
        return
      }
      let groups = []
      for (let i = 0;i < this.selectedGroups.length;i++ ){
        groups.push(this.selectedGroups[i].id)
      }
      deliverToGroups(this.paperIdForGroup,groups).then((response)=>{
        const httpResult = response.data
        if(httpResult.code === 200){
          this.$message.success(httpResult.message)
          this.groupDrawerVisible = false
          this.paperIdForGroup = ''
          this.queryQuestionnaires()
        }else {
          this.$message.error(httpResult.message)
        }
      })
    },
    submitSurveyToAnswerer(){
      if (this.selectedAnswerers.length === 0){
        this.$message.warning("未选中答者，无法发送到该答者")
        return
      }
      let answerers = []
      for (let i = 0;i < this.selectedAnswerers.length;i++ ){
        answerers.push(this.selectedAnswerers[i].id)
      }
      deliverToAnswerers(this.paperIdForAnswerer,answerers).then((response)=>{
        const httpResult = response.data
        if(httpResult.code === 200){
          this.$message.success(httpResult.message)
          this.answererDrawerVisible = false
          this.paperIdForAnswerer = ''
          this.queryQuestionnaires()
        }else {
          this.$message.error(httpResult.message)
        }
      })
    },


    handleGroupsSelectionChange (val) {
      this.selectedGroups = val
      // console.log(val)
    },
    handleAnswerersSelectionChange (val) {
      this.selectedAnswerers = val
      // console.log(val)
    },

    beforeHandleCommand(id,command){
      return{
        'id': id,
        'command': command
      }
    },
    handleChoose(command){
      if (command.command == '0'){
        this.chooseGroup(command.id)
      }
      if (command.command == '1'){
        this.chooseAnswerers(command.id)
      }
      if (command.command == '2'){
        this.chooseQR(command.id)
      }
    },

    createGroupList(){
      queryGroupsByKeyword('').then((res) =>{
        // console.log(res.data.data)
        this.drawerGroup = res.data.data
        for (let i = 0;i < this.drawerGroup.length;i++){
          this.drawerGroup[i].createdDate = DateFormat(this.drawerGroup[i].createdDate)
        }
      })
    },
    createAnswererList(){
      searchAnswerer(this.userInfo.id,'').then((res) =>{
        console.log(res.data.data)
        console.log(111)
          this.drawerAnswerer = res.data.data
        for (let i = 0;i < this.drawerAnswerer.length;i++){
          this.drawerAnswerer[i].createdDate = DateFormat(this.drawerAnswerer[i].createdDate)
        }
      })
    },

    chooseGroup(id){
      this.createGroupList()
      this.groupDrawerVisible = true;
      this.createSurveyDialogFormVisible = false
      this.answererDrawerVisible = false
      this.paperIdForGroup = id
      this.QRVisible = false
    },
    chooseAnswerers(id){
      this.createAnswererList()
      this.answererDrawerVisible = true
      this.groupDrawerVisible = false
      this.createSurveyDialogFormVisible = false
      this.paperIdForAnswerer = id
      this.QRVisible = false
    },
    chooseQR(id){
      this.QRVisible = true
      this.groupDrawerVisible = false
      this.createSurveyDialogFormVisible = false
      this.answererDrawerVisible = false
      this.paperIdForQR = id
      this.PaperUrl = 'http://localhost:8080/#/answerlogin?surveyId='+id
    },

    queryQuestionnaires(){
      querySurveyList(this.userInfo.id,this.search.key).then((response)=>{
        // console.log(response)
        const httpResult = response.data
        if(httpResult.code === 200){
          this.tableData = httpResult.data
          this.total = httpResult.data.length
        }else {
          this.$message.error(httpResult.message)
        }
      })
    },
    cleanSurveyBuff(){
      this.survey.title = ''
      this.survey.startToEnd = []
      this.survey.introduction = ''
      this.isLimit = false
      this.survey.maxAnswers = null
    },
    handleAdd(){
      this.cleanSurveyBuff()
      this.editTag = false
      this.createSurveyDialogFormVisible = true
    },
    handlePreview(id){
      // console.log("surveyId:"+id)
      getSurveyDetail(id).then((response)=>{
        // console.log(response)
        const httpResult = response.data
        if(httpResult.code === 200){
          window.sessionStorage.setItem("surveyInfo",JSON.stringify(httpResult.data.surveyInfo))
          window.sessionStorage.setItem("questionArray",JSON.stringify(httpResult.data.questionArray))
          this.$router.push({name:'Preview'})
        }else {
          this.$message.error("出现了一些错误")
          console.log(httpResult.message)
        }
      })
    },
    handleEdit(id,status){
      if(status===1){
        this.$message.warning('问卷进行中，不可编辑')
      }else if(status===2){
        this.$message.warning('问卷已结束，不可编辑')
      }else {
        getSurveyDetail(id).then((response)=>{
          // console.log(response)
          const httpResult = response.data
          if(httpResult.code === 200){
            this.survey.title = httpResult.data.surveyInfo.title
            this.survey.introduction = httpResult.data.surveyInfo.introduction
            if(httpResult.data.surveyInfo.maxAnswers!==100000000){
              this.isLimit = true
              this.survey.maxAnswers = httpResult.data.surveyInfo.maxAnswers
            }
            this.surveyInfo = httpResult.data.surveyInfo
            this.questionArray = httpResult.data.questionArray
            this.editTag = true
            this.createSurveyDialogFormVisible = true
          }else {
            this.$message.error("获取问卷详情失败")
            console.log(httpResult.message)
          }
        })
      }
    },
    goToSurveyEdit() {
      if(this.survey.title.length!==0&&this.survey.startToEnd.length!==0&&(this.isLimit===false||this.survey.maxAnswers!==null)){
        window.sessionStorage.setItem("survey",JSON.stringify(this.survey))
        if(this.editTag===true){
          window.sessionStorage.setItem("surveyInfo",JSON.stringify(this.surveyInfo))
          window.sessionStorage.setItem("questionArray",JSON.stringify(this.questionArray))
        }
        this.$router.push({name:'Edit'})
      }else {
        this.$message.warning("请补全信息")
        return
      }
      this.createSurveyDialogFormVisible = false
    },
    handleDelete(id){
      deleteSurvey(id).then((response)=>{
        // console.log(response)
        const httpResult = response.data
        if(httpResult.code === 200){
          this.$message.success("删除成功，即将刷新数据")
          this.queryQuestionnaires()
        }else {
          this.$message.error(httpResult.message)
        }
      })
    },

    handleViewResult(surveyId){
      // TODO: 查看结果
      console.log("查看结果")
      console.log('surveyId:' + surveyId)

      // 查询特定问卷的答者信息
      getAnswerInfo(surveyId).then((response) => {
        console.log(response)
        const httpResult = response.data
        if (httpResult.code === 200) {
          this.surveyResultData = httpResult.data
          this.answerTotal = httpResult.data.length
          this.surveyId = surveyId
          this.surveyResultVisible = true
        } else {
          this.$message.error('获取答者信息失败！')
        }
      })
    },
    handleDataAnalysis(id){
      // TODO: 数据分析
    },

    //查看具体问卷的回答情况
    handleResult(surveyId, answererId) {
      console.log('查看问卷内容')
      console.log('surveyId:' + surveyId)
      console.log('answerId:' + answererId)

      // 查询特定答者的答卷内容
      getSurveyContext(surveyId, answererId).then((response) => {
        console.log(response)
        const httpResult = response.data
        if (httpResult.code === 200) {
          this.questionArray = httpResult.data.questionArray
          this.surveyContextVisible = true
        } else {
          this.$message.error('获取答卷内容失败！')
        }
      })
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.currentPage = 1
    },
    handleSortChange({prop, order}){
      this.tableData.sort(compare(prop, order))
    },
    formatDate(date) {
      return exactDateFormat(date)
    },
    formatStatus(status){
      const map = {
        0: '未发布',
        1: '进行中',
        2: '已结束'
      }
      return map[status]
    },
    getTagType(status) {
      const map = {
        0: 'info',
        1: 'success',
        2: 'danger'
      }
      return map[status]
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] == value;
    }
  },

  created() {
    this.userInfo = JSON.parse(window.sessionStorage.getItem("data"))
    this.queryQuestionnaires()
  }
}
</script>

<style scoped>
.form {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}

.table {
  background: white;
  padding: 20px;
}

.table.table-title {
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}

.dw-table.dw-table-title h3 {
  padding: 0px;
  margin: 0px;
}

.el-form-item {
  margin-bottom: 0px;
}

.dw-dialog-form-item {
  margin-top: 20px;
}

.pagination {
  padding-top: 20px;
  text-align: right;
}



.content {
  padding: 2rem;
  border-top: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
}
.content .item {
  position: relative;
  margin: 1rem 0;
  padding: 1rem 2rem;
}
.content .item:hover {
  background-color: #fcf0e5;
}
.content .item:hover .operat-list {
  display: flex;
}
.content .item:hover div:last-of-type {
  display: none;
}
.content .item:hover #require-check {
  display: block;
}
.content .item h3 {
  height: 2rem;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 2rem;
}
.content .item h3 > input {
  display: none;
  width: 15rem;
  height: 2rem;
  font-size: 1.4rem;
  border: none;
  outline: none;
  background-color: #fff;
}
.content .item div:last-of-type {
  height: 2rem;
}
.content .item .qu-num {
  display: inline-block;
  width: 2rem;
  margin-right: 0rem;
}
.content .item.nowEditing .qu-topic {
  display: none;
}
.content .item.nowEditing h3 > input {
  display: inline-block;
}
.content .item.optEditing .optionEditing .optionText {
  display: none;
}
.content .item.optEditing .optionEditing > input {
  display: inline-block;
}
.content .options-list > li {
  height: 2rem;
  margin: 1rem 0 0 4rem;
  line-height: 2rem;
}
.content .options-list > li:hover ul {
  display: inline-flex;
  margin-left: 2rem;
}
.content .options-list > li:hover li {
  margin-left: 1rem;
  font-size: 1.2rem;
  cursor: pointer;
}
.content .options-list > li:hover li:hover {
  color: #409EFF;
}
.content .options-list > li > ul {
  display: none;
}
.content .options-list > li > input {
  display: none;
  width: 15rem;
  height: 2rem;
  font-size: 1.4rem;
  border: none;
  outline: none;
  background-color: #fff;
}
.content textarea {
  margin: 1rem 0 0 4rem;
  resize: none;
}
.content {
  display: none;
  height: 2rem;
  justify-content: flex-end;
  padding-top: 120px;
  padding-left: 50px;
}
.content {
  margin-right: 1rem;
  cursor: pointer;
}
.content {
  color: #409EFF;
}

.content .item {
  display: flex;
  border: 2px solid #ccc;
  /*border: none;*/
}
.content .item:hover {
  background-color: rgba(52, 73, 94, 0.15);
}
.content .item .question, .content .item .analysis {
  display: flex;
  flex-direction: column;
}
.content .item .question > *, .content .item .analysis > * {
  height: 2rem;
}
.content .item .question .echart, .content .item .analysis .echart {
  height: 20rem;
}
.content .item .question {
  flex: 3;
}
.content .item .question p {
  margin: 1rem 0 0 3rem;
}
.content .item .analysis {
  flex: 2;
}
.content .item .analysis .outerBar {
  position: relative;
  width: 20rem;
  height: 1.2rem;
  margin: 1.6rem 0 0 0;
  font-size: 1.2rem;
  border: 1px solid #ccc;
}
.content .item .analysis .innerBar {
  display: block;
  width: 60%;
  height: 100%;
  background-color: #409EFF;
}
.content .item .analysis .scaleNum {
  position: absolute;
  top: 0;
  right: -4rem;
}
</style>
